<!-- 入库单编辑弹窗 -->
<template>
  <ele-drawer
    size="calc(100vw - 250px)"
    :model-value="modelValue"
    @update:model-value="updateModelValue"
  >
    <template #header="{ titleClass }">
      <div class="flex-ba mr-30px">
        <div :class="titleClass">入库单详情 - {{ info.order_sn }}</div>
        <el-space :size="16">
          <el-button v-if="info.is_review === 1" type="primary" plain @click="showReview = true">审核</el-button>
          <el-button v-if="info.is_edit === 1" type="primary" plain @click="emit('openEdit', info)">编辑</el-button>
          <el-button v-if="info.is_cancel === 1" type="info" plain @click="openCancel">取消</el-button>
        </el-space>
      </div>
    </template>
    <div>
      <el-descriptions title="订单详情" :column="4">
        <el-descriptions-item label="订单号">{{ info.order_sn }}</el-descriptions-item>
        <el-descriptions-item label="订单类型">{{ info.type_name }}</el-descriptions-item>
        <el-descriptions-item label="商品数">{{ info.product_num }}</el-descriptions-item>
        <el-descriptions-item label="平台">{{ info.mch_name }}</el-descriptions-item>
        <el-descriptions-item label="货主">{{ info.supplier_name }}</el-descriptions-item>
        <el-descriptions-item label="仓库">{{ info.warehouse_name }}</el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <el-tag :type="info.review_status === 'DS' ? 'warning' : info.review_status === 'NS' ? 'danger' : 'success'">{{ info.review_status_name }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag :type="info.status === 'NR' ? 'danger' : info.status === 'CD' ? 'info' : 'primary'">{{ info.status_name }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="单据日期">{{ info.create_date }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ info.create_user_name }}</el-descriptions-item>
        <el-descriptions-item label="创建日期">{{ formatDate(info.create_time) }}</el-descriptions-item>
        <el-descriptions-item :span="2" label="备注">
          {{ info.remark || '-' }}
        </el-descriptions-item>
        <el-descriptions-item v-if="Array.isArray(info.enclosure) && info.enclosure.length" :span="2" label="附件">
          <div class="flex-inline">
            <FileUpload
              :model-value="JSON.stringify(info.enclosure.map(v => ({ url: v.filepath, name: v.filename })))"
              readonly
            />
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="mt-20px" title="商品信息" :column="4" />
      <ele-pro-table
        v-if="info.id"
        ref="tableRef"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :toolbar="false"
        :tools="false"
        highlight-current-row
      >
        <template #multi_unit="{ row }">
          <div class="flex-ca">
            <div v-for="(item, i) in row.multi_unit" :key="i">
              <span v-if="i">、</span>{{ item.num || 0 }}{{ item.unit }}
            </div>
          </div>
        </template>
      </ele-pro-table>
      <el-dialog
        v-model="showReview"
        title="系统提示"
        width="380"
      >
        <div class="h-40px flex-a">
          <IconElInfoFilled class="w-22px h-22px mr-12px text-[var(--el-color-warning)]" />
          <div>请确认当前订单的审核状态</div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showReview = false">取消</el-button>
            <el-button type="danger" :loading="loading" @click="review('NS')">审核不通过</el-button>
            <el-button type="primary" :loading="loading" @click="review('YS')">
              审核通过
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </ele-drawer>
</template>

<script setup>
import FileUpload from '@/components/FileUpload/index.vue'

const props = defineProps({
  /** 弹窗是否打开 */
  modelValue: Boolean,
  /** 修改回显的数据 */
  data: Object,
})

const emit = defineEmits(['update:modelValue', 'done', 'openEdit'])
const { formatDate } = utils
/** 提交状态 */
const loading = ref(false)

const showReview = ref(false)

const tableRef = ref(null)

/** 详情数据 */
const info = ref({})

const columns = ref([
  {
    type: 'index',
    label: '序',
    width: 60,
    align: 'center',
  },
  {
    prop: 'product_name',
    label: '商品名称',
    minWidth: 160,
    align: 'left',
  },
  {
    prop: 'product_code',
    label: '商品编码',
    minWidth: 120,
    align: 'center',
  },
  {
    prop: 'num',
    label: '商品数量',
    minWidth: 100,
    align: 'center',
  },
  {
    prop: 'unit',
    label: '主单位',
    minWidth: 100,
    align: 'center',
  },
  {
    prop: 'multi_unit',
    label: '数量明细',
    minWidth: 140,
    align: 'center',
    slot: 'multi_unit',
  },
  {
    prop: 'location',
    label: '库位',
    formatter: row => row.location?.length ? row.location.map(v => v.name).toString() : '-',
    minWidth: 140,
    align: 'center',
  },
  {
    prop: 'price',
    label: '价格',
    minWidth: 100,
    align: 'center',
  },
])

function getInfo() {
  loading.value = true
  utils.get('/stockEnter/info', { id: props.data.id }).then((res) => {
    info.value = res.data
  }).finally(() => {
    setTimeout(() => {
      loading.value = false
    }, 300)
  })
}

function refresh() {
  getInfo()
  tableRef.value.reload({ page: 1 })
}

/** 更新modelValue */
function updateModelValue(value) {
  emit('update:modelValue', value)
}

/** 表格数据源 */
function datasource({ page, limit, where, orders }) {
  const { id } = props.data
  return utils.get('/stockEnter/productList', { ...where, ...orders, id, page, limit })
}

function review(status) {
  loading.value = true
  utils.post('/stockEnter/review', {
    id: info.value.id,
    status,
  })
    .then((res) => {
      utils.message(res.msg, res.success)
      if (res.success) {
        showReview.value = false
        getInfo()
        emit('done')
      }
    })
    .finally(() => {
      loading.value = false
    })
}

function openCancel() {
  utils.confirm('确定要取消当前订单吗', '系统提示', {
    type: 'warning',
    draggable: true,
    cancelButtonText: '返回',
  }).then(() => {
    const loading = utils.message('请求中..', 'loading')
    utils.post('/stockEnter/cancel', {
      id: info.value.id,
    })
      .then((res) => {
        utils.message(res.msg, res.success)
        if (res.success) {
          emit('done')
          getInfo()
        }
      })
      .finally(() => loading.close())
  }).catch(() => {})
}

watch(
  () => props.modelValue,
  (modelValue) => {
    if (modelValue) {
      getInfo()
    }
    else {
      info.value = {}
    }
  },
)

defineExpose({
  refresh,
})
</script>
